<template>
  <div style="display: flex; justify-content: space-between;">

    <div class="col-lg-2 col-md-6 col-sm-6 col-12" style="margin-top: 100px;margin-right: 100px;" v-for="item in intoHTML" :key="item.id">
      <div class="image-flip" ontouchstart="this.classList.toggle('hover');">
        <div class="flip-team">

          <div class="front-A h-100">
            <div
              class="card profile-card-5 bor-no"
              :data-image-src=item.fimg>
              <div class="text-content">
                <h3 style="margin-bottom: 20px;">{{item.title}}</h3>
                <p>{{item.tip}}</p>
              </div>
              <div class="filter"></div>
            </div>
          </div>

          <div class="back-b h-100 d-flex flex-column" style="background-color: rgba(68, 68, 68, 0.5);">
            <div class="card bor-no">
              <h4 class="card-title">PB终端，您的道路小助手</h4>
              <p>让我们开始旅程吧！</p>
              <div style="height: 200px;width: 200px;margin: 50px;">
                <img :src= item.simg  style="width: 100%;height: 100%;">
              </div>
            </div>
            <div
              class="button d-flex mt-auto"
              style="justify-content: space-around; margin-bottom: 30px;"
            >
              <button type="button" class="btn btn-outline-primary" @click="back()">
                返回酒店
              </button>
              <button type="button" class="btn btn-outline-primary" @click="go(item.status)">
                开始导航
              </button>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mapGuideChoose",
  data() {
    return {
      intoHTML:[
        {id:1,title:"步行导航",tip:"每天走一走，活过九十九",fimg:"https://img0.baidu.com/it/u=3982002609,1225169343&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500",simg:"https://img0.baidu.com/it/u=207581555,2591266091&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=400",status:0},
        {id:2,title:"公交导航",tip:"如果车窗会说话，它—定记录了很多人的故事",fimg:"https://img2.baidu.com/it/u=2974882261,410656637&fm=253&fmt=auto&app=138&f=JPEG?w=724&h=500",simg:"https://img0.baidu.com/it/u=200821439,928673655&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",status:1},
        {id:3,title:"驾驶导航",tip:"速度与激情",fimg:"https://img2.baidu.com/it/u=1470197955,1358600906&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800",simg:"https://img0.baidu.com/it/u=97377082,946185700&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800",status:2},
        {id:4,title:"骑行导航",tip:"骑行一小时，快乐一整天",fimg:"https://img0.baidu.com/it/u=4063930538,1775589323&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500",simg:"https://img2.baidu.com/it/u=407440797,3020598792&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375",status:3}
      ],
      // ends:"",
      ends:"7天酒店(成都温江伊藤光华公园地铁站店)",
      id:0,
    };
  },
  methods: {
    go(status) {
        this.$router.push({name:"mapGuide",params:{status:status,ends:this.ends,id:this.id}});
    },
    back() {
      this.$router.push({name:"hotel_lhj",params:{hotel_id:this.id}})
    },
  },

  mounted() {
    $(".card").css("background", function() {
      var bg = "url(" + $(this).data("image-src") + ") no-repeat center center";
      return bg;
    });
    this.ends = this.$route.params.ends;
    this.id = this.$route.params.hotel_id;
    // this.ends = sessionStorage.getItem("hotelname");
    // this.id = sessionStorage.getItem("hotelid");
  },
};
</script>

<style>
@import url(../assets/styles/style.css);
@import url(../assets/styles/reset.css);
@import url(../assets/styles/responsive.css);
@import url("https://use.fontawesome.com/releases/v5.0.9/css/all.css");
@import url("https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700");
</style>
